package pri.jz.keeper.ui.view.content

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.insets.statusBarsHeight
import pri.jz.keeper.R
import pri.jz.keeper.entity.User
import pri.jz.keeper.ui.view.HorizontalPadding
import pri.jz.keeper.ui.content.ContentViewModel
import pri.jz.keeper.ui.content.personal.onSettingClick
import pri.jz.keeper.ui.content.personal.onUserInfoClick

/**
 *Author by: JZ
 *Email: 2451756617@qq.com
 *PS:
 */
@Composable
fun PersonalCenterView(
    viewModel: ContentViewModel = viewModel(),
) {
    val user by viewModel.user.observeAsState(User())
    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(Modifier.fillMaxWidth().statusBarsHeight().background(Color.DarkGray))
        PCTopView(
            modifier = Modifier.height(120.dp),
            user ?: User(),
            onUserInfoClick = viewModel::onUserInfoClick,
            onSettingClick = viewModel::onSettingClick
        )
    }
}

@Composable
private fun PCTopView(
    modifier: Modifier = Modifier,
    user: User,
    onUserInfoClick: () -> Unit,
    onSettingClick: () -> Unit
) {
    Column(
        modifier = modifier.fillMaxWidth().height(120.dp).background(Color.DarkGray)
    ) {
        Row(
            modifier = Modifier.fillMaxWidth().height(50.dp).clickable {
               onUserInfoClick()
            },
            verticalAlignment = Alignment.CenterVertically
        ) {
            IconButton(
                onClick = {},
                modifier = Modifier.padding(horizontal = HorizontalPadding)
            ) {
                val headIcon = user.headIcon?.asImageBitmap() ?: ImageBitmap.imageResource(R.drawable.img_default_head)
                Image(
                    headIcon,
                    contentDescription = null,
                    modifier = Modifier.size(40.dp)
                        .clip(CircleShape)
                        .background(Color.White)
                        .border(1.dp,Color.White, CircleShape)
                )
            }
            Column(
                modifier = Modifier.fillMaxHeight().weight(1f).padding(5.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = user.name, fontSize = 15.sp, color = Color.White)
                Text(text = user.number, fontSize = 13.sp, color = Color.White)
            }
            IconButton(
                onClick = onSettingClick
            ) {
                Icon(Icons.Default.Settings,contentDescription = null,modifier = Modifier.size(32.dp), tint = Color.White)
            }
        }
    }
}

@Composable
private fun PCVip() {

}

@Preview
@Composable
private fun PersonalCenterPreview() {
    PersonalCenterView()
}